<template>
	<view class="container">
		<MsgBox ref="msgBox"></MsgBox>
		<view class="thetodo" :key="item.index" v-if="isTodoing">
			{{item.todothing}}
		</view>
		
		<image bindload='bindload' :src="imgsFile" alt="" class="image" ></image>
		<yhdslCropper ref="yhdslCropper" :quality="10" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
		<view class="todoBox">
			<button class="todo" @click=" todoFlag = true" style="z-index: 10;">{{todoshow}}</button>
		</view>
		<view class="timebox">
			<view class="white-circle" v-show="showPop || todoFlag || corpperFlag || timePop">
			</view>
			<canvas class="timer" canvas-id="timer" v-if="!showPop && !todoFlag && !timePop">
			</canvas>
			<text class="timeText" v-show="showPop || todoFlag || corpperFlag || timePop">{{text}}</text>
		</view>
		
		<modal v-if="showPop" title="自定义背景图片" confirm-text="确定" cancel-text="取消" @cancel="timeCancelPop"
			@confirm="setCountdownTime" class="Pop">
			<!-- <view class="diyTime">
				<input type="number" class="input" :placeholder="placeholderText" v-model="showcountdownTime"
					:disabled="disabled"  maxlength="2"/><text class="diytimetext">分钟</text>
			</view> -->
			<view class="diyImg">
				<button class="onloadImg" @click="choose">选择背景图片</button>
				<uni-icons type="right" size="40" class="rightIcon" @click="choose"></uni-icons>
			</view>
		</modal>
		<modal v-if="todoFlag" title="todo项目" confirm-text="确定" cancel-text="取消" @cancel="todoCancelPop"
			@confirm="todoChange" class="Pop">
			<radio-group bindchange="radiochange">
				<radio @click="value=item.value" @tap="radiochange" v-for="(item,index) in todo" :key="item.index"
					:class="item.hidden" style="width:100vw;height: 6vh ;position: relative;">{{item.todothing}}</radio>
			</radio-group>
		</modal>
		</cover>
		
		<view class="control">
			<view class="buttons">
				<button class="button" v-if="!isRunning" @tap="start" style="padding: 1px 80px;">b e g i n !</button>
				<button class="button" v-if="isRunning&&!isCountup" @tap="pause"
					style="width: 246rpx;height: 94rpx;">{{ isPaused ? 'go on' : 'stop' }}</button>
				<button class="button" v-if="isRunning" @tap="reset" style="width: 246rpx;height: 94rpx;">give up</button>
			</view>
			<view class="Settingbox uni-flex uni-column" v-show="!isRunning">
				<view class="Switch">
					<view class="Switchtext">正计时</view>
					<switch color="#007AFF" v-model="isCountup" @change="toggleCountupMode" class="Switchbutton">
					</switch>
				</view>
				<view class="SettingTime">
					<view class="Settingtext">自定义时间</view>
					<button class="changeTime" @click=" open" :disabled="isCountup?true:false">更改时间</button>					
					<uni-popup ref="popup" type="dialog" adjust-position>
					<uni-popup-dialog mode="input" title="请输入自定义分钟" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="setCountdownTime" type="number" adjust-position></uni-popup-dialog>
					</uni-popup>
				</view>
				<view class="Setting">
					<view class="Settingtext">设置</view>
					<button class="more" @click=" showPop=true">查看更多</button>
				</view>
			</view>
		</view>
	</view>
	
	</view>

</template>
<script>
    import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	import MsgBox from '../../components/MsgBox/MsgBox.vue';
	
	export default {
		data() {
			return {
				text: '25:00',
				onshow: 0,
				flag:'',
				timer: null,
				ctx: null,
				r: 0,
				startTime: 25 * 60,
				elapsedTime: 0,
				remainingTime: 25 * 60,
				countdownTime: 25*60,
				showcountdownTime: 25,
				isRunning: false,
				isPaused: false,
				showPop: false,
				isCountup: false,
				clickFlag: true,
				todoFlag: false,
				disabled: false,
				corpperFlag:false,
				timePop: false,
				percent: 1,
				vulue: 0,
				url: "",
				imgWidth:"",
				imgHeight:"",
				scale:"0.5625",
				imgsFile: '/static/tomatopage.jpg',
				placeholderText: '请输入自定义时间',
				todoshow: '导入TODO事件',
				fontfamily: 'Dotties Chocolate',
				todo: [{
					todothing: '今天UI一定要画完',
					value: 1,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 2,
					hidden: 'yincang'

				}, {
					todothing: '今天UI一定要画完',
					value: 3,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 4,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 5,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 6,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 7,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 8,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 9,
					hidden: 'yincang'
				}, {
					todothing: '今天UI一定要画完',
					value: 10,
					hidden: 'yincang'
				}, ],
			};
		},
		components: {
		        yhdslCropper,
				 MsgBox,
		    },
		onReady() {
			this.getTodo();
			this.getR();
			this.getImg();
		},
		onShow(){
			console.log('img的值是'+this.imgsFile);
			if(uni.getStorageSync('imgsFile')!='')
			{
			console.log('niwhaspodo');
			console.log(this.imgsFile);	
				this.imgsFile=uni.getStorageSync('imgsFile')}
				console.log('本地缓存'+uni.getStorageSync('imgsFile'));
		},
		onLoad() {
			// 加载状态 
			// 判断是否有缓存
			// 如果有缓存 加载缓存
			// 如果没有 初始化 
			//22020007038 20040331lzl
			let flag1 =uni.getStorageSync('imgsFile') ? true : false;
			let flag2 =uni.getStorageSync('todoshow') ? true : false;
			this.flag=flag1||flag2;
			this.flag ? this.loadData() : this.initData();
			if(this.flag)this.loadmainData();
		},
		onUnload() {	
			// 保存状态
			this.remind();
			this.save();
			this.flag=true;
		},
		methods: {
			open() {
						this.$refs.popup.open()
						this.timePop =true;
					},
					close() {
								// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
								// ...
								this.$refs.popup.close()
								this.draw(this.percent);								
								this.timePop=false;
							},
			getImg(){
				wx.getImageInfo({
				  src: this.imgsFile,
				  success (res) {
					this.width=res.width;
				  }
				})
			},
			loadmainData(){
				
				console.log("番茄钟加载本地必要缓存");
					this.isCountup =  uni.getStorageSync('isCountup') ; 	
					this.isRunning = uni.getStorageSync('isRunning');
					this.remainingTime = uni.getStorageSync('time');
					this.startTime = uni.getStorageSync('startTime');
					this.elapsedTime = uni.getStorageSync('elapsedTime');
					this.countdownTime = uni.getStorageSync('countdownTime');
					
					// this.imgsFile =  this.flag?uni.getStorageSync('imgsFile') :'/static/tomatopage.jpg';
					this.isCountup = false;
			},
			// 加载
			loadData() {
				console.log("番茄钟加载本地缓存");
				this.isCountup =  uni.getStorageSync('isCountup') ;
				this.isRunning = uni.getStorageSync('isRunning');
				this.remainingTime = uni.getStorageSync('time');
				this.startTime = uni.getStorageSync('startTime');
				this.elapsedTime = uni.getStorageSync('elapsedTime');
				this.countdownTime = uni.getStorageSync('countdownTime');
				this.todoshow = uni.getStorageSync('todoshow');
				// this.imgsFile =  uni.getStorageSync('imgsFile') ;
				this.isCountup = false;
			},
			// 初始化
			initData() {
				console.log("番茄钟初始化");
				this.countdownTime = 25*60;
				this.remainingTime = 25 * 60;
				// this.todoshow = '导入TODO事件';
				// this.imgsFile = '/static/tomatopage.jpg';
			},
			getR(){ 
				this.ctx = uni.createCanvasContext("timer", this);
				this.ctx.translate(0, 0);
				const res = uni.getSystemInfoSync();
				this.windowWidth = res.windowWidth;
				this.windowHeight = res.windowHeight;
				this.r = Math.min(res.windowWidth, res.windowHeight) / 2.5;
				this.percent = uni.getStorageSync('percent');
				this.draw(this.percent);
			},
			getTodo() {
				uni.request({
					url: 'https://tomato.daoxuan.cc/todo/',
					header: {
						Accept: 'application/json',
						'Content-Type': 'application/json',
						'X-Requested-With': 'XMLHttpRequest',
						"Authorization": "Bearer " + uni.getStorageSync('login').access
					},
					method: 'GET',
					sslVerify: true,
					success: ({
						data,
						statusCode,
						header
					}) => {
						for (var i = 0; i < data.length; i++) {
							this.todo[i].todothing = data[i].thing;
							this.todo[i].hidden = '';
							this.value = this.todo[i].value;
						}
						console.log('todo事件');
						console.log(data);
						// this.userData.avatarUrl=data.file_url
					},
					fail: (error) => {}
				})
			},
			radiochange: function(e) {
				console.log(this.todo[this.value - 1].value);
				this.todoFlag = true;
				if (this.vulue = 0) {
					this.todoshow = '导入TODO事件';
				} else {
					this.todoshow = this.todo[this.value - 1].todothing;
				}
				console.log(this.todoFlag);
				console.log(this.todoshow);
				console.log(this.todo[this.value - 1].todothing);
			},
			toggleCountupMode() {
				this.isCountup = !this.isCountup;
				this.disabled = !this.disabled;
				if (this.isCountup) {
					this.remainingTime = 0;
				} else {
					this.remainingTime = 25 * 60;
					this.countdownTime = 25 * 60;
					this.startTime = 25 * 60;
					this.elapsedTime = 0;
				}
				this.draw(0);
			},
			drawchange(percent) {
				this.ctx.clearRect(0, 0, this.r * 2, this.r * 2);
			},
			draw(percent) {
				this.ctx.clearRect(0, 0, this.r * 2, this.r * 2);

				// 绘制白色圆形（暂时没用）
				this.ctx.setFillStyle("#ffffff");
				this.ctx.beginPath();
				this.ctx.arc(this.windowWidth * 0.4, this.windowWidth * 0.4, this.r / 1.13, 0, 2 * Math.PI, false);
				this.ctx.closePath();
				this.ctx.fill();

				// 绘制计时圆环
				if (this.isCountup) {
					this.ctx.setFillStyle("#007aff");
					const startAngle = 1.5 * Math.PI;
					let currentAngle = startAngle; // 记录当前的角度
					const interval = 60 * 1000; // 60秒转一圈
					const timer = setInterval(() => {
						this.ctx.clearRect(0, 0, this.r * 2, this.r * 2); // 清空画布
						const degrees = 360; // 每次转一圈
						const endAngle = (currentAngle + degrees / 180) * Math.PI; // 计算结束角度
						this.ctx.beginPath();
						this.ctx.moveTo(this.r, this.r);
						this.ctx.arc(this.r, this.r, this.r, currentAngle, endAngle, false);
						this.ctx.closePath();
						this.ctx.fill();
						currentAngle = endAngle; // 更新当前角度
					}, interval);
				} else {
					this.ctx.setFillStyle("#007aff");
					this.ctx.beginPath();
					this.ctx.moveTo(this.r, this.r);
					this.ctx.arc(this.windowWidth * 0.4, this.windowWidth * 0.4, this.r / 1.13, -Math.PI / 2, 2 * Math.PI *
						percent - Math.PI / 2, false);
					this.ctx.closePath();
					this.ctx.fill();
				}
				const res = wx.getSystemInfoSync();
				const rpx = uni.getSystemInfoSync();
				var windowWidth = res.windowWidth;
				var windowHeight = res.windowHeight;
				var windowWidth1 = rpx.windowWidth;
				var windowHeight1 = rpx.windowHeight;
				// 绘制白色圆形（暂时没用）
				this.ctx.setFillStyle("#ffffff");
				this.ctx.beginPath();
				this.ctx.arc(this.windowWidth * 0.4, this.windowWidth * 0.4, this.r / 1.2, 0, 2 * Math.PI, false);
				this.ctx.closePath();
				this.ctx.fill();
				// 绘制背景图片
				this.ctx.save();
				this.ctx.beginPath();
				this.ctx.arc(this.windowWidth * 0.4, this.windowWidth * 0.4, this.r / 1.2, 0, 2 * Math.PI, false);
				this.ctx.closePath();
				this.ctx.clip();
				this.ctx.drawImage(this.imgsFile,-this.windowWidth / 10,-this.windowHeight / 10,this.windowWidth,this.windowHeight);
				this.ctx.restore();
				// 绘制倒计时文本1
				this.ctx.setFontSize(36);
				this.ctx.setFillStyle("#ffffff");
				this.ctx.setTextAlign("center");
				this.ctx.setTextBaseline("middle");
				this.ctx.shadowOffsetX = this.r / 30; //用来设定阴影在 X轴的延伸距
				this.ctx.shadowOffsetX = this.r / 30; //用来设定阴影在 Y轴的延伸距
				this.ctx.shadowBlur = 0; //设定阴影的模糊程度 默认0
				this.ctx.shadowColor = "#E5E5E5"; //设定阴影颜色效果
				this.ctx.font = 'normal 61rpx DottiesChocolate-HeavyItalic';
				const minute = Math.floor(this.remainingTime / 60);
				const second = Math.floor(this.remainingTime % 60);
				this.text = `${minute < 10 ? "0" : ""}${minute}:${second < 10 ? "0" : ""}${second}`;
				this.ctx.fillText(this.text, this.windowWidth * 0.4, this.windowWidth * 0.4);
				this.ctx.draw();
				this.percent = percent;
			},
			todoCancelPop() {
				//取消
				this.contentPop = "";
				this.showPop = false;
				this.todoFlag = false;
				this.value = 0;
				this.todoshow = "导入TODO事件";
				this.draw(this.percent);
			},
			timeCancelPop(){
				this.contentPop = "";
				this.showPop = false;
				this.draw(this.percent);
			},
			start() {
				if (this.timer) {
				    clearInterval(this.timer);
				}
				this.isRunning = true;
				this.clickFlag = false;
				this.isPaused = false;
				this.startTime = new Date().getTime();

				if (this.isCountup) {
					this.countdownTime = 0;
				}
				this.timer = setInterval(() => {
					const now = new Date().getTime();
					const elapsedTime = (now - this.startTime) / 1000;

					if (this.isCountup) {
						this.remainingTime = elapsedTime;
					} else {
						this.remainingTime = this.countdownTime - elapsedTime;
					}

					if (this.remainingTime > 99 * 60) { // 限制正计时最大值
						this.remainingTime = 99 * 60;
						this.isRunning = false;
						clearInterval(this.timer);
					}
					if (this.remainingTime < 0) { // 倒计时暂停
						this.isRunning = false;
						clearInterval(this.timer);
						const focusedMinutes = Math.floor(this.countdownTime / 60);
						uni.showToast({
							title: `恭喜你专注了${focusedMinutes}分钟！`,
							icon: 'none',
							duration: 3000,
						});
						this.reset();
					}
					const percent = this.isCountup ? this.remainingTime / (99 * 60) : 1 - this.remainingTime / this
						.countdownTime;
					this.draw(percent);
				}, 50);
				console.log("this.isRunning:",this.isRunning);
				console.log("this.isCountup:",this.isCountup);
				console.log("this.isPaused:",this.isPaused);
			},

			pause() {
				if (this.timer) {
				    clearInterval(this.timer);
				}
				if(this.isPaused == false){				
					this.isPaused = true;
				clearInterval(this.timer);
				}else{
					this.isPaused = false;
					this.startTime = new Date().getTime() - (this.countdownTime - this.remainingTime) * 1000;
					this.timer = setInterval(() => {
						const now = new Date().getTime();
						const elapsedTime = (now - this.startTime) / 1000;
						this.remainingTime = this.countdownTime - elapsedTime;
						if (this.remainingTime <= 0) {
							this.remainingTime = 0;
							this.isRunning = false;
							clearInterval(this.timer);
						}
						const percent = 1 - this.remainingTime / this.countdownTime;
						this.draw(percent);
					}, 50);
				}
				console.log("this.isRunning:",this.isRunning);
				console.log("this.isCountup:",this.isCountup);
				console.log("this.isPaused:",this.isPaused);
				
			},
			resume() {
				if (this.isRunning && this.isPaused) {
					this.startTime = Date.now() - this.elapsedTime;
					this.timerId = setInterval(() => {
						this.elapsedTime = Date.now() - this.startTime;
						this.updateDisplay();
					}, 1000);
					this.isPaused = false;
				}
			},
			remind(){
				if (this.isCountup) {
					this.percent=0;
					const focusedMinutes = Math.floor(this.remainingTime / 60);
					uni.showToast({
						title: `恭喜你专注了${focusedMinutes}分钟！`,
						icon: 'none',
						duration: 3000,
					});
					this.remainingTime=25*60;
					this.countdownTime=25*60;
					this.isPaused = false;
					this.isRunning = false;
				} 
			},
			reset() {
				if (this.timer) {
				    clearInterval(this.timer);
				}
				this.timer = null;
				this.isRunning = false;
				this.isPaused = false;
				if (this.isCountup) {
					// 弹出警告框
						const focusedMinutes = Math.floor(this.remainingTime / 60);
						uni.showToast({
							title: `恭喜你专注了${focusedMinutes}分钟！`,
							icon: 'none',
							duration: 3000,
						});
					this.remainingTime = 0;
					this.draw(0);
				} else {
					uni.showToast({
						title: `取消专注`,
						icon: 'none',
						duration: 3000,
					});
					this.remainingTime = this.countdownTime;
					this.draw(0);
				}
				console.log("this.isRunning:",this.isRunning);
				console.log("this.isCountup:",this.isCountup);
				console.log("this.isPaused:",this.isPaused);
			},
			todoChange() {
				console.log(this.percent);
				this.draw(this.percent);
				this.todoFlag = false;
			},
			setCountdownTime(value) {
				if(isNaN(value)){
					uni.showToast({
						title: `请输入0-99的数字`,
						icon: 'none',
						duration: 3000,
					});							
				}else{
					if(value>99)value=99;
					this.showcountdownTime = value;
					this.countdownTime = this.showcountdownTime;
					if (this.countdownTime < 1) {
						this.countdownTime = 1;
					} else if (this.countdownTime > 999) {
						this.countdownTime = 999;
					}
					this.remainingTime = this.countdownTime *= 60;
					this.draw(0);
					this.showPop = false;
					if (this.isRunning) {
						clearInterval(this.timer);
						this.start();
					}
					this.close();
				}			
			},
			// onloadImg() {
			// 	uni.chooseImage({ //选择图片
			// 		count: 1,
			// 		sizeType: ["compressed"],
			// 		success(res) {
			// 			this.imgsFile = res.tempFiles[0].path
			// 						console.log(this.imgsFile);
			// 			uni.setStorageSync('imgsFile',this.imgsFile)
			// 			// this.imgsFile = res.tempFilePaths[0]; //获取图片的临时资源
			// 			// uni.setStorageSync('imgsFile', this.imgsFile) //存到本地缓存
			// 			console.log('你好');
			// 			console.log(this.imgsFile);
						
			//                //打印变量
                   
			// 		}
			// 	})
			// },
			 // onloadImg() {
			 //                uni.chooseMedia({
			 //                    count: 1,
			 //                    success: (rst) => {
			 //                        // 设置url的值，显示控件
			 //                        this.url = rst.tempFilePaths[0];
			 //                    }
			 //                });
			 //            },
			 //            onok(ev) {
			 //                this.url = "";
			 //                this.imgsFile = ev.imgsFile;
			 //            },
			 //            oncancel() {
			 //                // url设置为空，隐藏控件
			 //                this.url = "";
			 //            },
			 choose() {
						this.contentPop = "";
						this.showPop = false;
						this.corpperFlag=true;
						this.scale=this.windowWidth/this.windowHeight;
			             // 调用实例的chooseImg方法，拉起图片选择界面，待图片选择完毕后直接进入图片截取界面
			             this.$refs.yhdslCropper.chooseImage()
			         },
			         // 裁剪完成时,返回截取图片的临时路径
			         uploadImg(e) {
			             this.url = e;
			             this.imgsFile=this.url;
						 this.$refs.msgBox.showMsg(2, "更换成功");
						 uni.setStorageSync('imgsFile',this.imgsFile);
						 this.corpperFlag=false;
						 this.draw(this.percent);						 
			         }  ,     
			save() {
				uni.setStorageSync('time', this.remainingTime)
				uni.setStorageSync('percent', this.percent)
				uni.setStorageSync('startTime', this.startTime)
				uni.setStorageSync('elapsedTime', this.elapsedTime)
				uni.setStorageSync('countdownTime', this.countdownTime)
				uni.setStorageSync('isRunning', this.isRunning)
				this.isPaused = true;
				this.isCountup = false;
				// uni.setStorageSync('isPaused', this.isPaused)
				// uni.setStorageSync('showPop', this.showPop)
				// uni.setStorageSync('isCountup', this.isCountup)
				uni.setStorageSync('clickFlag', this.clickFlag)
				uni.setStorageSync('todoFlag', this.todoFlag)
				uni.setStorageSync('todoshow', this.todoshow)
			},
		},
	};
</script>

<style>

	.yincang {
		display: none;
	}
	.image{
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: -11;
	}
	.todoBox{
		display: flex;
		justify-content: center;
	}
	.diyImg{
		display: flex;
		justify-content: space-between;
		width: 100vw;
		margin-left: -5vw;
	}
	.diyTime{
		display: flex;
	}
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		position: relative;
	}

	.timebox {
		position: absolute;
		top: 10vh;
		z-index: -10;
		display: flex; 
		justify-content: center; 
		align-items: center;
	}

	.timeText {
		text-align: center;
		position: absolute;
		top: 19vh;
		font-size: 110rpx;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 22rpx;
	}

	.todo {
		position: absolute;
		min-width: 369rpx;
		height: 60rpx;
		background: #62ABFA;
		border-radius: 17rpx;
		top: 4vh;
		font-size: 38rpx;
		font-family: Smiley Sans;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
		margin: 0 auto;
		padding: 16.5rpx;
	}

	.timer {
		width: 80vw;
		height: 80vw;
		margin: 0 auto;
		overflow: hidden;
		top: 0rpx;
	}

	.cover-view {
		position: absolute;
	}

	.white-circle {
		position: absolute;
		top: 2.3vh;
		width: 70.8vw;
		height: 70.8vw;
		border-radius: 50%;
		background: white;
		mask: radial-gradient(transparent 33.3vw, #000 33.3vw);
	}

	.control {
		position: absolute;
		height: 94rpx;
		margin-top: 100rpx;
	}

	.button {
		margin-right: 5vw;
		margin-left: 5vw;
		margin-top: 100rpx;
		font-size: 42rpx;
		color: #fff;
		padding: 1rpx 20rpx;
		border-radius: 20px;
		border: none;
		font-family: Dotties Chocolate;
		line-height: 94rpx;
		background: #007AFF;
		border-radius: 33rpx;
	}

	.onloadImg {
		line-height: 6vh;
		margin-top: 2vh;
		margin-left: -10vw;
		background-color: #ffffff;
		font-size: 42rpx;
		padding: 1rpx 20rpx;
		font-family: Smiley Sans;
		color: #535353;
		height: 6vh;
		width: 100vw;
		margin-left: 0rpx;
		padding-left: 30rpx;
		text-align: left;
	}

	.rightIcon {
		position: absolute;
		margin-left: 75vw;
		margin-top: 2.5vh;
		color: #535353;
	}

	.time-select {
		display: flex;
		align-items: center;
	}

	.Pop {
		display: flex;
		background: #f2f5fe;
	}

	.diytimetext {
		font-size: 42rpx;
		margin-left: 7vw;
		margin-top: 1vh;
	}

	.input {
		width: 46vw;
		height: 6vh;
		border-top: 1px solid #007aff;
		border-bottom: 1px solid #007aff;
		padding-left: 10px;
		font-size: 40rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-around;
	}

	.Settingbox {
		    margin-top: 5vh;
		    position: relative;
		    width: 683rpx;
		    height: 273rpx;
		    background: #FFFFFF;
		    border-radius: 33rpx;
		    z-index: 10;
		    display: flex;
	}

	.Switch {
		height: 100rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
	}

	.Setting {
		margin-left: 5vw;
		    margin-top: 105rpx;
		    height: 0rpx;
		    display: flex;
		    justify-content: space-between;
		    position: absolute;
	}
	.SettingTime{
		margin-left: 5vw;
		margin-top: 30rpx;
		height: 0rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
	}
	.Switchtext {
		margin-left: 5vw;
		margin-top: 20rpx;
		font-size: 44rpx;
		font-family: Smiley Sans;
		font-weight: normal;
		color: #535353;
		line-height: 22rpx;
	}

	.Switchbutton {
		margin-left: 50vw;
	}

	.Settingtext {
		margin-top: 100rpx;
		    font-size: 44rpx;
		    font-family: Smiley Sans;
		    font-weight: normal;
		    color: #535353;
		    line-height: 22rpx;
		    width: 300rpx;
	}
	.changeTime{
		margin-top: 100rpx;
		    height: 50rpx;
		    margin-left: 23vw;
		    font-size: 20rpx;
		    font-family: Smiley Sans;
		    font-weight: normal;
		    color: #007aff;
	}
	.more {
		margin-top: 100rpx;
		    height: 50rpx;
		    margin-left: 23vw;
		    font-size: 20rpx;
		    font-family: Smiley Sans;
		    font-weight: normal;
		    color: #535353;
	}
</style>